@use "sass:color";
@use "sass:math";
@use "./_variables" as *;
@use "./_mixins" as *;
@use "./element/index" as *;

// 全局样式
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: $font-size-base;
  background-color: $bg-color;
  color: $text-color;
}

#app {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

// 全局滚动条样式
* {
  @include scrollbar;
}

// 通用样式类
.flex-center {
  @include flex(row, center, center);
}

.flex-between {
  @include flex(row, space-between, center);
}

.text-ellipsis {
  @include text-ellipsis;
}

// 间距类
.mt-1 { margin-top: $spacing-small; }
.mt-2 { margin-top: $spacing-base; }
.mt-3 { margin-top: $spacing-medium; }
.mt-4 { margin-top: $spacing-large; }

.mb-1 { margin-bottom: $spacing-small; }
.mb-2 { margin-bottom: $spacing-base; }
.mb-3 { margin-bottom: $spacing-medium; }
.mb-4 { margin-bottom: $spacing-large; }

// 页面容器
.page-container {
  padding: $spacing-medium;
  height: 100%;
  overflow-y: auto;
}

// 卡片样式
.card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: $border-radius-base;
  padding: $spacing-medium;
  
  &-header {
    @include flex(row, space-between, center);
    margin-bottom: $spacing-medium;
    
    .title {
      font-size: $font-size-large;
      font-weight: 500;
    }
  }
}

// 搜索栏
.search-bar {
  @include flex(row, space-between, center);
  margin-bottom: $spacing-medium;
  
  .left {
    @include flex(row, flex-start, center);
    gap: $spacing-base;
  }
  
  .right {
    @include flex(row, flex-end, center);
    gap: $spacing-base;
  }
}

// 操作按钮
.action-button {
  padding: 0 $spacing-small;
  
  &:not(:last-child) {
    margin-right: $spacing-small;
  }
}